
<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">栏目管理</h1>
</div>
<div class="wrapper-md">
  <div class="panel panel-default">
    <div class="panel-heading">
      栏目管理
    </div>
    <div >

      <div  ng-controller="dataTablesCtrl">
       <div class="row">

         <div class="col-sm-12" >
           <div class="panel-heading">

            <a href="javascript:void(0);"" ng-click="goAdd();"><button class="btn btn-default btn-sm "><i class="fa fa-plus fa-lg"></i>&nbsp; 新增</button></a>

            <a href="javascript:void(0);" ng-click="goEdit();" ><button class="btn btn-default btn-sm "><i class="fa fa-edit fa-lg"></i>&nbsp; 编辑</button></a>

            <a href="javascript:void(0);" ng-click="goRemove();" ><button class="btn btn-default btn-sm "><i class="fa fa-trash-o fa-lg"></i>&nbsp; 删除</button></a>

            <!--隐藏域-->
            <input type="hidden" id ="optIds" name="optIds">


          </div>
        </div>
      </div>

      <!-- <div id="div1"></div> -->
        <table id="myTable" class="table table-striped m-b-none"></table>

    </div>

  </div>

</div>
</div>



<script language="javascript">

  var menuTopUrl = API_URL+"program_class?query=delflag:0,FatherId:0&sortby=ClassDisplayOrder&order=asc&number="+Math.random();
  
  var temps =  [];
      //得到了所有的父级
      var data = MY_ASYNC_AJAX(menuTopUrl);
      for (var i = data.length - 1; i >= 0; i--) {
        var obj =  {Id:data[i].Id, ClassName: data[i].ClassName,ClassDisplayOnPc:data[i].ClassDisplayOnPc,ClassDisplayOnPhone:data[i].ClassDisplayOnPhone,ClassDisplayOnPad:data[i].ClassDisplayOnPad,ClassDisplayOnTv:data[i].ClassDisplayOnTv,ClassDisplayOrder:data[i].ClassDisplayOrder,
          children:getChildren(data[i].Id)}
          temps.push(obj);
        }
      //递归获取子级
      function getChildren(classId){
        var url = API_URL+"program_class?query=delflag:0,FatherId:"+classId+"&number="+Math.random();
        var data = MY_ASYNC_AJAX(url);
        var temps =  [];
        if(null!=data){
         for (var i = data.length - 1; i >= 0; i--) {
          var obj =  {Id:data[i].Id, ClassName: data[i].ClassName,ClassDisplayOnPc:data[i].ClassDisplayOnPc,ClassDisplayOnPhone:data[i].ClassDisplayOnPhone,ClassDisplayOnPad:data[i].ClassDisplayOnPad,ClassDisplayOnTv:data[i].ClassDisplayOnTv,ClassDisplayOrder:data[i].ClassDisplayOrder,
            children:getChildren(data[i].Id) }
            temps.push(obj);
          }
          return temps;
        }
      }


       

      var config = {
        id: "tg1",
        width: "100%",
        renderTo: "myTable",
        headerAlign: "left",
        headerHeight: "30",
        dataAlign: "left",
        indentation: "20",
        folderOpenIcon: "vendor/jquery/TreeGrid/images/folderOpen.gif",
        folderCloseIcon: "vendor/jquery/TreeGrid/images/folderClose.gif",
        defaultLeafIcon: "vendor/jquery/TreeGrid/images/defaultLeaf.gif",
        hoverRowBackground: "false",
        folderColumnIndex: "1",
        itemClick: "itemClickEvent",
        columns:[
        {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},
        {headerText: "菜单名称", dataField: "ClassName", headerAlign: "center", handler: "customOrgName", width: "100"},
        {headerText: "显示设备", dataField: "null", headerAlign: "center", handler: "customOnService", dataAlign: "center", width: "100"},

        {headerText: "节目数量", dataField: "ClassSmallIcon", headerAlign: "center", dataAlign: "center",handler: "showIcon", width: "100"},
        {headerText: "排序号", dataField: "ClassDisplayOrder", headerAlign: "center", dataAlign: "center", width: "100"},
        {headerText: "操作", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"}
        ],
        data:temps
      };

      
    //创建一个组件对象
    var treeGrid = new TreeGrid(config);
    treeGrid.show();
    treeGrid.expandAll('N');
    

    /*
      单击数据行后触发该事件
      id：行的id
      index：行的索引。
      data：json格式的行数据对象。
      */
      function itemClickEvent(id, index, data){
        jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data));
      }

    /*
      通过指定的方法来自定义栏数据
      */
      function customCheckBox(row, col){
        return "<input type='checkbox' value='"+ row.Id + "' name='ids' onclick='checkOne()'>";
      }

      function customOrgName(row, col){
        var name = row[col.dataField] || "";
        return name;
      }

      function showIcon(row, col){
        return "<i   class='"+row.ClassSmallIcon+"'></i>";
      }

      function customOnService(row, col){
        var href = '';
        if(row.ClassDisplayOnPc==1){
          href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('pc',0,"
          + row.Id
          + ")>";
          href += "<i style='color:#2e8ded;' title='PC' class='fa fa-laptop fa-lg'></i></a>";

        }else{
          href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('pc',1,"
          + row.Id
          + ")>";
          href += "<i  title='PC' class='fa fa-laptop fa-lg'></i></a>";
        }
        if(row.ClassDisplayOnPhone==1){
          href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('phone',0,"
          + row.Id
          + ")>";
          href += "<i style='color:#2e8ded;' title='Phone' class='fa fa-phone fa-lg'></i></a>";

        }else{
          href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('phone',1,"
          + row.Id
          + ")>";
          href += "<i  title='Phone' class='fa fa-phone fa-lg'></i></a>";

        }

        if(row.ClassDisplayOnPad==1){
          href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('pad',0,"
          + row.Id
          + ")>";
          href += "<i title='pad' style='color:#2e8ded;' class='fa fa-tablet fa-lg'></i></a>";
        }else{
          href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('pad',1,"
          + row.Id
          + ")>";
          href += "<i title='pad' class='fa fa-tablet fa-lg'></i></a>";
        }


        if(row.ClassDisplayOnTv==1){

          href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('tv',0,"
          + row.Id
          + ")>";
          href += "<i title='tv' style='color:#2e8ded;' class='fa fa-tv fa-lg'></i></a>";
        }else{
          href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('tv',1,"
          + row.Id
          + ")>";
          href += "<i title='tv' class='fa fa-tv fa-lg'></i></a>";
        }
        
        return href;

      }



//修改是否展示状态
function updateDisplay(type,value,id){
  var info = '您确定';
  if(1==value){
    info+='打开';
  }else{
    info+='关闭';
  }
  
  if('pc'==type){
    info+='电脑端';
  }else if('phone'==type){
    info+='手机端';
  }else if('pad'==type){
    info+='pad端';
  }else if('tv'==type){
    info+='电视机端';
  }
  
  info+="显示吗？";


   //发起POST请求
   var postInfoUrl = API_URL+"program_class";

   var infoUrl = API_URL+"program_class?query=delflag:0,Id:"+id;

   var formData =  MY_ASYNC_AJAX(infoUrl)[0];


   if('pc'==type){
    formData.ClassDisplayOnPc = value+"";
  }else if('phone'==type){
    formData.ClassDisplayOnPhone = value +"";
  }else if('pad'==type){
    formData.ClassDisplayOnPad = value+"";
  }else if('tv'==type){
    formData.ClassDisplayOnTv = value+"";
  }

  
  top.layer.confirm(info, function(index){

    $.ajax({
      url : postInfoUrl+'/'+id,
      type : 'put',
      data: JSON.stringify(formData),
      cache : false,
      success : function(data) {
        top.layer.msg('更新成功');

      //$("#myTable").DataTable().ajax.reload().draw();
      window.location.reload();
    }
  });
    top.layer.close(index);
  });

}


function customLook(row, col){
  return "<a href='javascript:void(0);' style='color:blue;' onclick=goDelete(" + row.Id+ ") >删除</a>";
}

    /*
      展开、关闭所有节点。
      isOpen=Y表示展开，isOpen=N表示关闭
      */
      function expandAll(isOpen){
        treeGrid.expandAll(isOpen);
      }

    /*
      取得当前选中的行，方法返回TreeGridItem对象
      */
      function selectedItem(){
        var treeGridItem = treeGrid.getSelectedItem();
        if(treeGridItem!=null){
        //获取数据行属性值
        //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);
        
        //获取父数据行
        var parent = treeGridItem.getParent();
        if(parent!=null){
          //jQuery("#currentRow").val(parent.data.name);
        }
        
        //获取子数据行集
        var children = treeGridItem.getChildren();
        if(children!=null && children.length>0){
          jQuery("#currentRow").val(children[0].data.name);
        }
      }
    }


    function checkOne(){
      var optIds = '';
      $("input[name='ids']:checkbox:checked").each(function(){ 
        optIds+=$(this).val() +',';
      });
      if(''!=optIds){
        optIds = optIds.substring(0,optIds.length-1);
      }
      $('#optIds').val(optIds);

      console.log($('#optIds').val());
    }


  </script>


  <script type="text/javascript" >



//单条删除
function goDelete(id){
  top.layer.confirm('您确定删除吗', function(index){
    var postInfoUrl = API_URL+"program_class";

    var infoUrl = API_URL+"program_class?query=delflag:0,Id:"+id;

    var formData =  MY_ASYNC_AJAX(infoUrl)[0];

    formData.Delflag = "1";
    $.ajax({
      url : postInfoUrl+'/'+id,
      type : 'put',
      data: JSON.stringify(formData),
      cache : false,
      success : function(data) {
        top.layer.msg('删除成功');

      }
    });

    top.layer.close(index);
    window.location.reload();
  });
}



//angularjs总控制器
app.controller('dataTablesCtrl', function($scope, $http,$state) {
//进入编辑页面
$scope.goEdit = function () {
  var optIds = $('#optIds').val();
  if(''==optIds){
    top.layer.msg('请至少选择一项', {icon: 6});
    return false;
  }
  if(optIds.indexOf(",") != -1){
    top.layer.msg('编辑只能选择一项', {icon: 6});
    return false;
  }
  $state.go('app.movie.managerColumnEdit', {infoId: optIds});
};
//进入新增页面
$scope.goAdd = function () {
  var optIds = $('#optIds').val();
  if(''==optIds){
    $state.go('app.movie.managerColumnAdd', {classId: "0"});
  }
  if(optIds.indexOf(",") != -1){
    top.layer.msg('新增只能选择一项父菜单', {icon: 6});
    return false;
  }
  $state.go('app.movie.managerColumnAdd', {classId: optIds});
};


//进入删除
$scope.goRemove = function () {

 var optIds = $('#optIds').val();
 if(''==optIds){
  top.layer.msg('请至少选择一项', {icon: 6});
  return false;
}

top.layer.confirm('您确定删除这些信息吗', function(index){

  var postInfoUrl = API_URL+"program_class";

  var optArrs = optIds.split(',');

  for(var i = 0;i< optArrs.length;i++ ){

   var infoUrl = API_URL+"program_class?query=delflag:0,Id:"+optArrs[i];

   var formData =  MY_ASYNC_AJAX(infoUrl)[0];

   formData.Delflag = "1";

   $.ajax({
     url : postInfoUrl+'/'+optArrs[i],
     type : 'put',
     data: JSON.stringify(formData),
     cache : false,
     success : function(data) { 
        top.layer.close(index);

      window.location.reload();

     }  
   }); 

 }

});

};
});




</script>